<template>
  <div class="pop-up-child">
    <header class="header">
      <p class="title">我的本场奖品</p>
      <div class="close" @click="close">
        <Iconfont iconClass="cha1"/>
      </div>
    </header>
    <div class="no-prize-box" v-if="isNoPrzize">
      <img src="../../assets/images/no-prize.png" >
      <p>空空如也～您还没有中奖哦</p>
    </div>
    <div class="list-content" v-if="!isNoPrzize">
      <ul >
      	<li v-for="(v,index) of lotteryArray " :key = 'v.prizeId'>
      	   <div class="left-box">
      	   	  <div class="mark-box">
      	   	  	  {{v.prizeType=='1'?'奖品':'礼券'}}
      	   	  </div>
      	   	  <template v-if="v.prizeType=='1'">
                  <img :src="v.picUrl || defaultPngSW"/>
      		   </template>
      		  <template v-if="v.prizeType=='2'">
                  <img :src="v.picUrl || defaultPngLQ"/>
      		  </template>
      	   </div>
      	   <div class="middle-box">
      	   		<p class="top-text">{{v.prizeNm}}</p>
      	   		<!--<p class="middle-text">来自：该字段太君未提供接口</p>-->
      	   		<p class="middle-text">中奖时间：{{v.crtTime}}</p>
      	   		<p class="bottom-text">{{v.effeStartTime.slice(0,10)}} 至 {{v.effeEndTime.slice(0,10)}}</p>
      	   </div>
      	   <template v-if="v.expire">
      	   	    <div class="btn-gray"  @click="clickSingleLottery(v)">已过期</div>
      	   </template>
      	   <template v-else>
      	   	 <div class="btn" @click="clickSingleLottery(v)"> 查看</div>
      	   </template>
      	</li>
      </ul>
      <p class="tip-text">*平台所获全部奖品请至“返回直播首页-我的-我的奖品礼券”查看</p>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
    	 liveWinArray:Object,//直播间中奖数组
    },
    data() {
      return {
        lotteryArray:this.liveWinArray,
        isNoPrzize:false,
        defaultPngSW:require("@/assets/images/choujiang/shiwu.png"),
        defaultPngLQ:require("@/assets/images/choujiang/liquan.png"),
      }
    },
    created () {
      if(this.lotteryArray.length){
         this.isNoPrzize = false;
      }else{
        this.isNoPrzize = true;
      }
    },
    methods: {
      clickSingleLottery(v){//查看 已经过期
        this.$emit("formChildMsg",{
          type: "triggerPrizeInfo",//触发直播间单个奖品
          data: v
        })
        //this.isTurntable = true;
        //this.winInfoData = v;
      },
      close() {
        this.$emit("formChildMsg",{
          type: "footerActionSheetClose",
          data: ''
        })
      },
    },
  };
</script>
<style scoped="scoped">
  .no-prize-box{
    width: 100vw;
    max-height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
   .no-prize-box img{
     width: 300px;
     height: 300px;
   }
    .no-prize-box p {
      font-size: 30px;
      font-weight: 400;
      color: #999999;
      margin-bottom: 20px;
    }
  .pop-up-child {
    width: 100%;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1501;
    border-radius: 20px 20px 0px 0px;
  }

  .pop-up-child .header {
    line-height: 90px;
    text-align: center;
    position: relative;
  }

  .pop-up-child .title {
    font-size: 37px;
    font-weight: 400;
    color: #353635;
  }

  .pop-up-child .close {
    position: absolute;
    top: 0;
    right: 0;
  }

  .pop-up-child .iconcha1 {
    padding: 0 30px;
    font-size: 18px;
    color: #c8c9cc;
  }

  .list-content {
    width: 100%;
    padding: 0 30px 0;
    max-height: 520px;
    overflow-y: scroll;
  }

  .tip-text {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    color: #FF0000;
  }
.list-content ul{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.list-content ul li{
        width: 722px;
		height: 201px;
		background: #FFFFFF;
		margin: 17px 0 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
     /*这里高度后面要判断zyzq的高度*/
	.list-content{
		width: 100vw;
		/* background: darkcyan; */
		overflow-y: scroll;
	}
	.prize-list-box{
		width: 100vw;
		height: 100vh;
		background: #F7F7F7;
		overflow: hidden;
	}
	.minePrize-box-title{
		position: relative;
		background: white;
	}
	  .minePrize-box-title p{
	  	width: 100%;
	  	height: 80px;
	  	font-size: 36px;
	  	text-align: center;
	  	line-height: 80px;
	  	color: #333333;
	  }
	  .noprize-box{
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	  	flex-direction: column;
	  	margin-top: 300px;
	  }
	 .noprize-box img{
	   width: 326px;
	   height: 326px;
	}
	.noprize-box p{
	  width: 100%;
	  height: 40px;
	  color: #C5C5C5;
	  font-size: 28px;
	  text-align: center;
	}
  .left-box img{
  	width: 155px;
  	height: 155px;
  }
  .mark-box{
  	width: 72px;
  	height: 32px;
  	background: rgba(0,0,0,0.6);
  	/*opacity: 0.6;*/
  	line-height: 32px;
  	text-align: center;
  	position: absolute;
  	top: 0;
  	left: 0;
  	font-size: 19px;
  	color: white;
  }
  .middle-text{
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;
  	margin: 20px 0;
  	color: #999999;
  }
  	.bottom-text{
  	margin: 20px 0;
  	color: #999999;
  }
  .top-text{
  	font-size: 32px;
  	color: black;
  	 overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;
  }
  .middle-box{
       width: 331px;
  	/*background: salmon;*/
  	margin-left: 38px;
  	font-size: 22px;
  }
  .left-box{
  	width: 155px;
  	height: 155px;
  	background: #FFFFFF;
  	border: 1px solid #EDEDED;
  	margin-left: 26px;
  	position: relative;
  }
  .btn{
  	width: 133px;
  	height: 55px;
  	background: linear-gradient(-50deg, #F2324C, #FF6C7F);
  	border-radius: 27px;
  	color: #FFFFFF;
  	font-size: 28px;
  	line-height: 55px;
  	text-align: center;
  	margin-right: 17px;
  	margin-left: 23px;
  }
   .btn-gray{
  	width: 133px;
  	height: 55px;
  	background: #E2E2E2;
  	border-radius: 27px;
  	color: #FFFFFF;
  	font-size: 28px;
  	line-height: 55px;
  	text-align: center;
  	margin-right: 17px;
  	margin-left: 23px;
  }
</style>
